
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	template="template/template.xhtml" xmlns:p="http://primefaces.org/ui">
	<ui:define name="title">Customer manage page</ui:define>

	<ui:define name="menu">
		<ul>
			<li><a href='service.jsf'><span>Service</span></a></li>
			<li><a href='taxi.jsf'><span>Taxi</span></a></li>
			<li><a href='map-view.jsf'><span>Map</span></a></li>

			<li class="active"><a href='customer.jsf'><span>Customer</span></a></li>
			<li><a href='user.jsf'><span>User</span></a></li>

		</ul>
	</ui:define>

	<ui:define name="main-content">
		<div
			style="min-width: 960; min-height: 700px; padding-top: 2%; margin-left: 10px; margin-right: 10px">
			<div style="text-align: center">
				<p:growl id="growl"></p:growl>
				<h:form style="">
					<span style="font-size: 14px; font-weight: 700; margin-right: 3px">
						Search:</span>
					<p:inputText id="number" value="#{customer.phoneNumber}"
						maxlength="11">
						<p:ajax event="keyup" listener="#{customer.findCustomer}"
							update=":cusForm"></p:ajax>
					</p:inputText>
					<p:watermark for="number" value="Input a phone number" />
				</h:form>
			</div>
			<hr style="margin-top: 10px; border-color: gray;"></hr>
			<h:form id="cusForm">

				<p:contextMenu for="tabledata">
					<p:menuitem value="Delete" onclick="confirmation.show()"></p:menuitem>
				</p:contextMenu>

				<p:confirmDialog id="confirmDialog" message="Are you sure?"
					header="Initiating delete process" severity="alert"
					widgetVar="confirmation">

					<p:commandButton id="confirm" value="Yes Sure"
						update="tabledata,:growl" oncomplete="confirmation.hide()"
						actionListener="#{customer.delete}" />
					<p:commandButton id="decline" value="Not Yet"
						onclick="confirmation.hide()" type="button" />
				</p:confirmDialog>

				<p:dataTable value="#{customer.customers}" var="item" id="tabledata"
					style="width: 100%" rendered="#{customer.hasCus}" editable="true"
					draggableColumns="true" paginator="true" rows="15"
					paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
					rowsPerPageTemplate="5,10,15" selection="#{customer.customer}"
					selectionMode="single" rowKey="#{item.customerId}">

					<p:ajax event="rowEdit" listener="#{customer.onEdit}"
						update=":growl"></p:ajax>
					<p:ajax event="rowEditCancel" listener="#{customer.onCancel}"
						update=":growl"></p:ajax>

					<p:column style="text-align: center;" headerText="Id">
						<h:outputText value="#{item.customerId}" />
					</p:column>
					<p:column headerText="Name" style=" width: 130px">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{item.customerName}"></h:outputText>
							</f:facet>
							<f:facet name="input">
								<h:inputText value="#{item.customerName}" required="true"
									style="width:100%"
									requiredMessage=" Don't leave name empty!">
									<p:ajax event="blur" update=":growl"></p:ajax>
								</h:inputText>
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column style="align: center; width: 50px"
						headerText="Hone Number">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{item.homePhone}"></h:outputText>
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{item.homePhone}" style="width:100%"></p:inputText>
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column style="align: center; width: 50px"
						headerText="Office Number">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{item.officePhone}"></h:outputText>
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{item.officePhone}" style="width:100%"></p:inputText>
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column style="align: center; width: 50px"
						headerText="Newest Number">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{item.newestPhone}"></h:outputText>
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{item.newestPhone}" style="width:100%"></p:inputText>
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column headerText="Home Address">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{item.homeAddress}"></h:outputText>
							</f:facet>
							<f:facet name="input">
								<p:inputTextarea value="#{item.homeAddress}" maxlength="300"
									style="width:100%"></p:inputTextarea>
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column headerText="Office Address">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{item.officeAddress}"></h:outputText>
							</f:facet>
							<f:facet name="input">
								<p:inputTextarea value="#{item.officeAddress}" maxlength="300"
									style="width:100%"></p:inputTextarea>
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column headerText="Newest Address">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{item.newestAddress}"></h:outputText>
							</f:facet>
							<f:facet name="input">
								<p:inputTextarea value="#{item.newestAddress}" maxlength="300"
									style="width:100%"></p:inputTextarea>
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column style="align: center; width: 10px" headerText="Options">
						<p:rowEditor></p:rowEditor>
					</p:column>
				</p:dataTable>
			</h:form>
		</div>
	</ui:define>

</ui:composition>



